import React from 'react';
import { useSearchParams } from 'react-router-dom';
import { DownloadOutlined } from '@ant-design/icons';
import { Button, Card, Divider, Space } from 'antd';
import { Typography } from 'antd';
import html2canvas from 'html2canvas';
import printJS from 'print-js';
import { useRecoilState } from 'recoil';
import {
  advantageInfo,
  baseInfo,
  educationInfo,
  objectInfo,
  order,
  shineBlogInfo,
  workInfo,
} from '@/stores/store-resume';

const { Title } = Typography;

const ResumeViewOut = () => {
  const [routeParams] = useSearchParams();

  const type = routeParams.get('type');

  // 顺序
  const [storeOrder] = useRecoilState(order);

  // 基础信息
  const [storeBaseInfo] = useRecoilState(baseInfo);

  // 教育经历
  const [storeEducationInfo] = useRecoilState(educationInfo);

  // 教育经历
  const [storeShineBlogInfo] = useRecoilState(shineBlogInfo);

  // 个人优势
  const [storeAdvantageInfo] = useRecoilState(advantageInfo);

  // 工作经历
  const [storeWorkInfo] = useRecoilState(workInfo);

  // 项目经历
  const [storeObjectInfo] = useRecoilState(objectInfo);

  const store = (values) => {
    const obj = {};

    values.forEach((item) => {
      obj[item.field] = item.value;
    });

    return obj;
  };

  // 打印
  const print = () => {
    const printContent = document.getElementById('pdfId');
    // 获取dom 宽度 高度
    const width = printContent.clientWidth;
    const height = printContent.clientHeight;
    // 创建一个canvas节点
    const canvas = document.createElement('canvas');

    const scale = 1; // 定义任意放大倍数，支持小数；越大，图片清晰度越高，生成图片越慢。

    canvas.width = width * scale; // 定义canvas 宽度 * 缩放
    canvas.height = height * scale; // 定义canvas高度 *缩放
    canvas.style.width = width * scale + 'px';
    canvas.style.height = height * scale + 'px';
    canvas.getContext('2d').scale(scale, scale); // 获取context,设置scale

    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 获取滚动轴滚动的长度
    const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; // 获取水平滚动轴的长度

    html2canvas(printContent, {
      canvas,
      backgroundColor: null,
      useCORS: true,
      windowHeight: document.body.scrollHeight,
      scrollX: -scrollLeft, // 解决水平偏移问题，防止打印的内容不全
      scrollY: -scrollTop,
    })
      .then((canvas) => {
        const url = canvas.toDataURL('image/png');

        printJS({
          printable: url,
          type: 'image',
          documentTitle: '', // 标题
          // style: '@page{size:auto;margin: 1cm 1cm 1cm 1cm;}', // 去除页眉页脚
          style:
            '@media print{ @page { size: A4; margin: 1cm 1cm 1cm 1cm; mso-header: none; mso-footer: none; } body{margin:0px  } img {display: block; margin: 0px;}}',
        });
      })
      .catch((err) => {
        console.error(err);
      });
  };

  return (
    <div className="relative">
      {type == 'view' && (
        <div className="absolute left-148px top-48px z-9">
          <Button type="primary" shape="circle" icon={<DownloadOutlined />} onClick={() => print()}></Button>
        </div>
      )}
      <div className="rd-4px p-24px">
        <Card className="m-auto max-w-1200px shadow">
          <div className="p-48px">
            <div id="pdfId">
              {storeOrder.map((item) => {
                if (item.isNoShow) return;

                if (item.key === '1') {
                  return (
                    <div className="text-center" key={item.key}>
                      <Title level={3}>{store(storeBaseInfo)?.name}</Title>
                      <Space split={<Divider type="vertical" />}>
                        {store(storeBaseInfo)?.phone}
                        {store(storeBaseInfo)?.mail}
                        {store(storeBaseInfo)?.sex}
                        {store(storeBaseInfo)?.age}
                      </Space>
                    </div>
                  );
                } else if (item.key === '5') {
                  return (
                    <div className="mt-24px" key={item.key}>
                      <Title level={5}>{item.label}</Title>
                      <Divider className="my-12px" />
                      {storeWorkInfo.map((item, i) => {
                        return (
                          <div key={item.id} className="mb-24px">
                            <div className="mb-12px flex justify-between">
                              <Space size="large">
                                <b>{store(item.child)?.[`companyName${i + 1}`]}</b>
                                <span>{store(item.child)?.[`postName${i + 1}`]}</span>
                              </Space>
                              <span className="text-#999999">
                                {store(item.child)?.[`companyStartTime${i + 1}`]}-
                                {store(item.child)?.[`companyEndTime${i + 1}`]}
                              </span>
                            </div>
                            <div dangerouslySetInnerHTML={{ __html: store(item.child)?.[`companyWork${i + 1}`] }}></div>
                          </div>
                        );
                      })}
                    </div>
                  );
                } else if (item.key === '2') {
                  return (
                    <div className="mb-36px mt-24px" key={item.key}>
                      <Title level={5}>{item.label}</Title>
                      <Divider className="my-12px" />
                      <div className="flex justify-between">
                        <Space size="large">
                          <b>{store(storeEducationInfo)?.school}</b>
                          <span>{store(storeEducationInfo)?.degree}</span>
                          <span>{store(storeEducationInfo)?.major}</span>
                        </Space>
                        <span className="text-#999999">
                          {store(storeEducationInfo)?.start}-{store(storeEducationInfo)?.end}
                        </span>
                      </div>
                    </div>
                  );
                } else if (item.key === '4') {
                  return (
                    <div className="mb-36px mt-24px" key={item.key}>
                      <Title level={5}>{item.label}</Title>
                      <Divider className="my-12px" />
                      <div dangerouslySetInnerHTML={{ __html: storeAdvantageInfo?.value }}></div>
                    </div>
                  );
                } else if (item.key === '3') {
                  return (
                    <div className="mb-36px mt-24px" key={item.key}>
                      <Title level={5}>{item.label}</Title>
                      <Divider className="my-12px" />
                      <div dangerouslySetInnerHTML={{ __html: storeShineBlogInfo?.value }}></div>
                    </div>
                  );
                } else if (item.key === '6') {
                  return (
                    <div className="mt-24px" key={item.key}>
                      <Title level={5}>{item.label}</Title>
                      <Divider className="my-12px" />
                      {storeObjectInfo.map((item, i) => {
                        return (
                          <div key={item.id} className="mb-24px">
                            <div className="mb-12px flex justify-between">
                              <Space size="large">
                                <b>{store(item.child)?.[`companyName${i + 1}`]}</b>
                                <span>{store(item.child)?.[`postName${i + 1}`]}</span>
                              </Space>
                              <span className="text-#999999">
                                {store(item.child)?.[`companyStartTime${i + 1}`]}-
                                {store(item.child)?.[`companyEndTime${i + 1}`]}
                              </span>
                            </div>
                            <div dangerouslySetInnerHTML={{ __html: store(item.child)?.[`companyWork${i + 1}`] }}></div>
                          </div>
                        );
                      })}
                    </div>
                  );
                }
              })}
            </div>
          </div>
        </Card>
      </div>
    </div>
  );
};

export default ResumeViewOut;
